import React from "react";
import { HashRouter, Routes, Route, Navigate } from "react-router-dom";
import HomeHead from "./components/HomeHead";

// 导入需要的组件
import A from "./views/A";
import B from "./views/B";
import C from "./views/C";
import A1 from "./views/a/A1";
import A2 from "./views/a/A2";
import A3 from "./views/a/A3";

function App() {
  return (
    <HashRouter>
      <HomeHead />

      <div className="content">
        {/* 
          所有的路由匹配规则，放在<Routes/>中,每一条的规则匹配，还是基于<Route/>
            + 路由匹配成功，不再基于component/render控制渲染的组件，而是基于element，语法格式是<Component/>
            + 不在需要Switch,默认就是一个匹配成功，就不在匹配下面的了
            + 不在需要exact,默认每一项匹配都是精准匹配
          原有的<Redirect>操作，被<Navigate to="/"/>代替
            + 遇到<Navigate />组件，路由就会挑战，挑转到to指定的路由地址
            + 可以加上replace={true},不会新增立即记录，而是替换现有记录
            + <Navigete to={{...}}/> to的值可以是一个对象：pathname需要跳转的地址、search问号传参信息，只有这两个
        */}
        <Routes>
          <Route path="/" element={<Navigate to="/a" replace={true} />} />
          <Route path="/a" element={<A />}>
            <Route path="/a" element={<Navigate to="/a/a1" />} />
            <Route path="/a/a1" element={<A1 />} />
            <Route path="/a/a2" element={<A2 />} />
            <Route path="/a/a3" element={<A3 />} />
          </Route>
          <Route path="/b" element={<B />} />
          <Route path="/c/:id?/:name?" element={<C />} />
          {/* 如果以上都不匹配，我可以渲染404组件，也可以重定向到A组件，【传递不同的问号参数信息】 */}
          <Route
            path="*"
            element={
              <Navigate
                to={{
                  pathname: "/404",
                  search: "?lx=404",
                }}
                replace={true}
              />
            }
          />
        </Routes>
      </div>
    </HashRouter>
  );
}

export default App;
